<template>
    <div>
        <h3>模块化项目中跨域代理模式和跨域区分</h3>
        <pre>
        开发跨域的问题
            + 只解决开发时的跨域问题时，可以直接将模块环境中 内置的 代理服务器启动即可
            + 修改vue.config.js 文件启动代理服务器
            <code>
            devServer: {
                port: 8080,
                // 开发服务器的相关功能配置，配置开发服务器的地址端口功能……
                //     该配置项只对开发环境生效
                devServer:{
                    // 代理服务器配置,实现在开发环境解决开发跨域问题
                    // proxy:Object
                    // Object 定义代理服务器的相关代理规则
                    proxy:{
                        // key ：value
                        // key 可以定义任意字符：描述当前代理服务器需要拦截的请求地址 前缀
                        // key 取值以 地址方式定义
                        /*
                            例如：
                                项目中请求了 /api/filmApi/loadFilms.php 
                                代理服务器会将该请求转发到 target 属性地址上
                                真实发生的请求地址将变为  http://127.0.0.1:80/api/filmApi/loadFilms.php 
                        */
                        "/api":{
                            target:"http://127.0.0.1:80", // 定义被拦截请求的真实访问服务器
                            // 拦截前缀的重写规则
                            /*
                                例如：
                                    项目中请求了 /api/filmApi/loadFilms.php 
                                    更具匹配规则重写地址 "^/api":""
                                    因为规则问题，地址吧被重新定义 /filmApi/loadFilms.php
                                    代理服务器会将该请求转发到 target 属性地址上
                                    真实发生的请求地址将变为  http://127.0.0.1:80/filmApi/loadFilms.php 
                            */
                            pathRewrite:{
                                // key 匹配的重写 正则 规则
                                "^/api":""
                            },
                            // 在项目开发服务器的启动控制台进行 日志输出
                            logLevel:"debug"
                        }
                        // 定义多个代理服务器
                    }
                },
            },
            </code>
            + 启动自动的  模式 前缀切换,通过如下代码在不同环境中启动不同的请求前缀
                process.env.NODE_ENV === 'production'? 'http://127.0.0.1:80': '/api'
            + 在工具模块中，通过全局统一配置 可以实现 axios的自动前缀

            axios.defaults.baseURL = process.env.NODE_ENV === 'production'? 'http://127.0.0.1:80': '/api';
        </pre>
        <pre>{{res}}</pre>
        <input type="button" value="未被代理的请求" @click="loadTypes()">
        <input type="button" value="被代理的请求" @click="loadTypesCors()">

    </div>
</template>
<script>
import axios from 'axios'
let baseUrl = process.env.NODE_ENV === 'production'? 'http://127.0.0.1:80': '/api'
export default {
    data(){
        return {
            res:[]
        }
    },
    methods:{
        loadTypes(){
            axios.get("http://127.0.0.1/filmApiNoCors/loadTyps.php")
                .then(({ data })=>{
                    this.res = data;
                })
        },
        loadTypesCors(){
            // axios.get("/api/filmApiNoCors/loadTyps.php")
            //     .then(({ data })=>{
            //         this.res = data;
            //     })
            console.log("baseUrl",baseUrl);

            axios.get("/filmApiNoCors/loadTyps.php")
                .then(({ data })=>{
                    this.res = data;
                })
        }
    }
}
</script>